<template>
  <el-table :data="dataList"
            v-loading="state.loading"
            border
            :fit="true"
            style="width:100%;"
            :cell-style="tableStyle.cellStyle"
            :header-cell-style="tableStyle.headerCellStyle"
  >
    <el-table-column width="120" prop="productionLineCode" :label="$t('iot.productionLineCode')" show-overflow-tooltip/>
    <el-table-column width="120" prop="processName" :label="$t('iot.processName')" show-overflow-tooltip/>
    <el-table-column width="120" prop="checkItemName" :label="$t('qms.testItem')" show-overflow-tooltip/>
    <el-table-column width="120" prop="checkItemCode" :label="$t('qms.testItemCode')" show-overflow-tooltip/>
    <el-table-column width="120" prop="unit" :label="$t('iot.unit')" show-overflow-tooltip/>
    <el-table-column width="120" prop="standardItem" :label="$t('qms.standardValue')" show-overflow-tooltip/>
    <el-table-column width="120" prop="checkResult" :label="$t('qms.testResult')" show-overflow-tooltip>
      <template #default="scope">
        <!--根据不同的状态选择不同的颜色的tag-->
        <el-tag size="large" :type="scope.row.type == 1 ? 'success' : 'danger'">
          {{ scope.row.checkResult }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column width="120" prop="supportImage" :label="$t('qms.supportingInformation')" show-overflow-tooltip>
      <template #default="scope">
        <!--根据不同的状态选择不同的颜色的tag-->
        <el-button @click="clickSupportImage(scope.row.supportImage)" v-if="scope.row.supportImage">{{$t('qms.Preview')}}</el-button>
      </template>
    </el-table-column>
    <el-table-column width="120" prop="testTypeCode" :label="$t('qms.testCategories')" show-overflow-tooltip/>
  </el-table>
  <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
</template>

<script setup lang="ts">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {getPqcDPageSet} from "/@/api/platform/qms/qmsCheckReport";


// 搜索变量

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: getPqcDPageSet
})


// 计算属性处理state.list
const dataList = computed(() => {
  state.dataList.forEach((item: any) => {
    let value = item.checkResult;
    if (value == 'pass'){
      item.type = 1
    }else if(value == 'fail'){
      item.type = 2
    }else {
      var split = item.standardItem.split("~");
      if (Number(split[0])<=value && value<=Number(split[1])){
        item.type = 1
      }else {
        item.type = 2
        item.checkResult = 'fail'
      }
    }
  })
  return state.dataList
})


const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  tableStyle
} = useTable(state)

// 父级点击的行
const parentClickRow = {}

const clickSupportImage = (url: String) => {
  let urls = url.split(",")
  var s = encodeURIComponent(btoa(urls));
  window.open('http://172.16.100.10:8012/onlinePreview?url=' + s);
}

// 搜索变量
const queryRef = ref()

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  getDataList()
}

// 通过id进行子表的查询
const query = (id: Object) => {
  // 赋值查询参数
  state.queryForm.FQCId = id
  // 刷新子表数据
  getDataList()
}

// 暴露变量
defineExpose({
  resetQuery,
  query
});

</script>

<style scoped lang="scss">

</style>